<template>
	<div>
		<Card>
			<Collapse style="margin-bottom:15px;">
				<Panel>查询
					<div slot="content">
						<Form ref="formLkyStudent" :model="formLkyStudent" label-position="right" :label-width="80" inline>
							<!--学院、专业、班级查询-->
							<FormItem label="所属学院" prop="name1">
								<Select v-model="coid" style="width:200px" @on-open-change="onOpenChangeCollege" @on-change="onOpenChangeMajor" clearable >
									<Option v-for="item in collegeList" :value="item.id" :key="item.id">
										{{ item.name }}
									</Option>
								</Select>
							</FormItem>
							<FormItem label="所属专业" prop="name2">
								<Select v-model="mid" style="width:200px" @on-change="onOpenFindClassByMid" clearable >
									<Option v-for="item in majorList" :value="item.id" :key="item.id">
										{{ item.name }}
									</Option>
								</Select>
							</FormItem>
							<FormItem label="所属班级" prop="name3">
								<Select v-model="cid" style="width:200px" clearable >
									<Option v-for="item in classList" :value="item.id" :key="item.id" >
										{{ item.name }}
									</Option>
								</Select>
							</FormItem>
							<FormItem label="学生姓名" prop="USER_NAME">
								<Input type="text" v-model="formLkyStudent.USER_NAME" placeholder="学生姓名" />
							</FormItem>
							<Button type="primary" @click="handleSubmit('formLkyStudent')">查询</Button>
							<Button @click="handleReset('formLkyStudent')" style="margin-left: 8px">重置</Button>
							</FormItem>
						</Form>
					</div>
				</Panel>
			</Collapse>

			<Table ref="tableLkyStudent" :data="tableData" :columns="columns" @on-selection-change="onSelectionChange"
			 @on-sort-change="onSortChange" @on-row-click="onRowClick" />
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="total" :current="current" :page-size="pageSize" @on-page-size-change="changePageSize" @on-change="changePage"
					 :show-total="true" show-sizer></Page>
				</div>
			</div>

		</Card>
	</div>
</template>

<script>
	import {
		list,
		updateStatus
	} from '@/api/lky/lkyStudent'
	import {
		createFormObj,
		createModelObj,
		getToken
	} from '@/libs/util'
	// 学院查询、专业、班级查询
	import {
		queryAll
	} from '@/api/lky/lkyCollege'
	import {
		queryAllM
	} from '@/api/lky/lkyMajor'
	import {
		queryFindClassByMid
	} from '@/api/lky/lkyClass'
	import Add from './add.vue'
	import Edit from './edit.vue'

	export default {
		name: 'LkyStudent',
		components: {
			Add,
			Edit
		},
		data() {
			return {
				lkyStudentStatus: {
					USER_NAME: '',
					id: '',
					student_number: ''
				},
				formLkyStudent: {

					USER_NAME: '',
					c_id: ''
				},

				columns: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						key: 'USER_NAME',
						title: '学生',
						sortable: true
					},
					{
						key: 'name',
						title: '班级',
						sortable: true
					},
					{
						key: 'name1',
						title: '专业',
						sortable: true
					},
					{
						key: 'name2',
						title: '学院',
						sortable: true
					},

					{
						title: '操作',
						key: 'action',
						width: 250,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},

										on: {
											click: () => {
												console.log(params.row)
												this.show(params.row)
											}
										}
									},
									'详细信息'
								),
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.editLkyStudent = params.row
												// this.handleOpenPage('edit')
												this.$router.push({
													path: '/student/fill',
													query: {
														id: params.row.id
													}
												})
											}
										}
									},
									'填表状态'
								)

							])
						}
					}
				],
				tableData: [],
				total: 0,
				current: 1,
				pageSize: 10,
				isOpenAddPage: false,
				isOpenEditPage: false,
				editLkyStudent: {},
				selection: [],
				// 创建容器
				coid: '',
				mid: '',
				cid: '',
				USER_NAME: '',
				collegeList: [],
				majorList: [],
				classList: []
			}
		},
		methods: {
			onOpenChangeCollege() {
				queryAll().then(res => {
					this.collegeList = res.data
				})
			},
			onOpenChangeMajor(coid) {
				this.cid = ''
				this.mid = ''
				queryAllM({
					'coid': this.coid
				}).then(res => {
					this.majorList = JSON.parse(JSON.stringify(res.data))
				})
			},
			onOpenFindClassByMid(mid) {
				
				queryFindClassByMid({
					'mid': this.mid
				}).then(res => {
					this.classList = JSON.parse(JSON.stringify(res.data))
				})
			},
			show(row) {
				// 打开页面事件(添加页,编辑页...)
				console.log(row)
				this.$Modal.info({

					content: `<h1>学生详细信息</h1><br>
					 <h2>姓名：${row.USER_NAME}</h2>
					  <h2>性别:${row.sex}</h2>
					   <h2>班级：${row.name}</h2>
					  <h2>专业：${row.name1}</h2>
					  <h2>学院：${row.name2}</h2>
					  <h2>学号：${row.student_number}</h2>
					  <h2>手机号：${row.telphone}</h2>
					  <h2>籍贯：${row.native_place}</h2>
					  <h2>现居住地：${row.now_place}</h2>
					  `
				})
			},
			onRowClick(row) {
				this.id = row.id
			},
			handleSubmit(name) {
				// 查询按钮事件
				this.getLkyStudentList(this.current, this.pageSize)
				this.$Message.success('Success!')
			},
			handleReset(name) {
				this.coid = ''
				this.mid = ''
				this.cid = ''
				// 重置按钮事件
				this.$refs[name].resetFields()
			},
			handleOpenPage(name) {
				// 打开页面事件(添加页,编辑页...)
				if (name === 'add') this.isOpenAddPage = true
				else if (name === 'edit') {
					this.isOpenEditPage = true
				}
			},
			addLkyStudent(row) {
				this.tableData.push(row)
			},
			updateLkyStudent(row) {
				this.$set(this.tableData, row._index, row)
			},
			batchDelete() {
				this.$Modal.confirm({
					title: '提示',
					content: '<p>确定删除吗?</p>',
					onOk: () => {
						if (this.selection.length > 0) {
							let ids = ''
							for (var i = 0; i < this.selection.length; i++) {
								ids += ',' + this.selection[i].id
							}
							batchDelete({
								ids: ids
							}).then(res => {
								for (var i = 0; i < this.selection.length; i++) {
									this.tableData = this.tableData.filter(
										item => item.id !== this.selection[i].id
									)
								}
							})
						} else {
							this.$Message.error('未选中记录!')
						}
					},
					onCancel: () => {}
				})
			},
			getLkyStudentList(current, pageSize, paras) {
				let para = {
					pageNumber: current,
					pageSize: pageSize
				}
				if (paras) Object.assign(para, paras)
				// key-value放入传入后端
				Object.assign(para, {
					tid: this.tid,
					coid: this.coid,
					mid: this.mid,
					cid: this.cid,
					USER_NAME: this.USER_NAME,
					uid: getToken()
				})
				console.log(para)
				list(this.handleRequestParams(para)).then(res => {
					this.tableData = res.list
					this.current = parseInt(res.pageNumber)
					this.pageSize = parseInt(res.pageSize)
					this.total = parseInt(res.totalRow)
				})
			},
			handleRequestParams(para) {
				Object.assign(para, createFormObj(this.formLkyStudent, 'lkyStudent'))
				return para
			},
			exportExcel() {
				this.$refs.tableLkyStudent.exportCsv({
					filename: `table-${new Date().valueOf()}.csv`
				})
			},
			changePage(pageNumber) {
				this.getLkyStudentList(pageNumber, this.pageSize)
			},
			changePageSize(pageSize) {
				this.getLkyStudentList(this.current, pageSize)
			},
			remove(index) {
				this.data6.splice(index, 1)
			},
			onSelectionChange(selection) {
				this.selection = selection
			},
			onSortChange(obj) {
				if (obj.order === 'normal') {
					this.getLkyStudentList(1, this.pageSize)
				} else {
					this.getLkyStudentList(1, this.pageSize, {
						field: obj.key,
						order: obj.order
					})
				}
			}
		},
		mounted() {
			this.getLkyStudentList(this.current, this.pageSize)
		}
	}
</script>

<style>
</style>
